import Taro, { Component } from '@tarojs/taro'
import PropTypes from 'prop-types'
import { View, Image, Text } from '@tarojs/components'
import default_img from '@/assets/checked.png'
import './index.scss'

/** 
 * 单行标题Item
 * 
 * @param cls 附加className
 * @param title 标题
 * @param extra 额外内容
 * @param bold 标题加粗
 * @param height 高度
 * @param img 头部图标
 * @param border 底部横线
 * @param lineColor 底部横线颜色
 * @param arrow 右侧箭头
 * @param onClick
 */
class RowItem extends Component {

	static propTypes = {
		cls: PropTypes.string,
		title: PropTypes.string,
		extra: PropTypes.oneOfType([
			PropTypes.string, 
			PropTypes.element
		]),
		placeholder: PropTypes.string,
		border: PropTypes.bool,
		bold: PropTypes.bool,
		arrow: PropTypes.bool,
		height: PropTypes.oneOfType([
			PropTypes.string,
			PropTypes.number
		]),
		img: PropTypes.oneOfType([
			PropTypes.object,
			PropTypes.number
		]),
		lineColor: PropTypes.string,
		onClick: PropTypes.func,
	}

	static defaultProps = {
		height: 40,
		border: true,
		bold: true,
		arrow: false,
		img: '',
		lineColor: '#F8F7F7',
	}

	constructor(props){
		super(props)
		this.state = {}
	}

	render(){
		const { cls, title, extra, placeholder, border, bold, arrow, height, img, lineColor } = this.props

		return(
			<View className={`row-item ${cls || ''}`} style={{borderColor: lineColor, borderWidth: `${border ? '1px': '0'}`, height: height }} onClick={this.toClickItem}>
				<View className='item-title' style={{fontWeight: `${bold ? 'bold' : 'normal' }`}}>	
					{img && <Image className={`row-item-img`} src={img} ></Image>}
					<Text>{title}</Text>
				</View>
				<View className={`item-extra`} style={{ color: `${extra ? '#666': '#999'}`}}>{extra || placeholder} {arrow && <View className='arrow-right'></View>}</View>
			</View>
		)
	}

	toClickItem = () => {
		const { onClick } = this.props
		onClick && onClick()
	}
}

export default RowItem